<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .loading {
            width: 40px;
            height: 40px;
            animation: rotate 1s linear infinite;
            box-shadow: 0 0 10px #ccc;
            background: linear-gradient(to right, red, blue);
            border-radius: 50%;
        }

        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }

        .loading2 {
            width: 40px;
            height: 40px;
            animation: rotate 1s linear infinite;
            border: 4px solid #eee;
            border-top-color: #409EFF;
            border-radius: 50%;
        }

        .spinner {
            width: 40px;
            height: 40px;
            animation: spinner-rotate 1s linear infinite;
        }

        .spinner-path {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: 0;
            animation: spinner-dash 1.5s ease-in-out infinite;
        }

        @keyframes spinner-rotate {
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes spinner-path {
            0% {
                stroke-dasharray: 1, 150;
                stroke-dashoffset: 0;
            }
            50% {
                stroke-dasharray: 90, 150;
                stroke-dashoffset: -35;
            }
            100% {
                stroke-dasharray: 90, 150;
                stroke-dashoffset: -124;
            }
        }
    </style>
</head>
<body>
<div class="loading"></div>
<div class="loading2"></div>
<svg class="spinner" viewBox="0 0 50 50">
    <circle
            class="spinner-path"
            cx="25"
            cy="25"
            r="20"
            fill="none"
            stroke="#409EFF"
            stroke-width="4"
            stroke-linecap="round"
    />
</svg>
</body>
</html>
